Interface & identity standards
SolariNet
Unified systems, network & asset monitoring
A corrective pass over the generated identity — colour, type, mark, iconography and the dashboard that carries them.

Revision 2 replaces the generated first pass — a 1920×1080 deck built on the Modernist template. It keeps the restrained cyberpunk character of the product and corrects both layers of fault: a guide that specified a font it never loaded and omitted status colour entirely, and an interface that consequently used colour, glow and monospace without assigning any of them a job.

Version2.0.0
Date2026-07-29
Supersedes1.x generated
OwnerSolariNet
FormatLetter · 816×1056
ThemesDark · Light
Section 00

Contents

Sixteen pages. Each settles one question and states the rule a developer applies without asking.
§
Section
What it settles
01
Audit of Rev 1
Fourteen findings, ranked by damage to legibility
02
Colour architecture
Why brand must leave the status hues
03
Palette
Three tiers, capped, with print values
04
Contrast
Every approved pairing, measured at render
05
Status system
Six states and the one encoding each may use
06
Quiet-healthy principle
How 100+ nodes stay readable at a glance
07
Logo
Three candidates, one recommendation
08
Logo construction
Unit, clear space, minimum size
09
Logo misuse
Six failures already present in Rev 1
10
Typography
Two faces and the mono/sans division of labour
11
Type scale
Nine steps with a stated body floor
12
Iconography
One library, one grid, one stroke
13
Components
Before and after for the six that carry the UI
14
Layout & density
Grid, wrap behaviour, tile minimums
15
Empty states & copy
Vocabulary, and what to render when data is absent
16
Handoff
Ordered change list for implementation

Reading order. Sections 02 and 05–06 are the substance of the revision; everything else follows from them. If only one change ships, ship the colour architecture.

SolariNet · Rev 2.0.002
Section 01

Audit of Rev 1

Read from the v1 guide source and the three dashboard captures. The guide-level faults come first because they caused most of the interface-level ones.

Guide-level — the specification itself

G1
The specified font never loadsds/styles.css imports Archivo over the network; index.html then overrides both tokens to IBM Plex Sans, which is never imported. The guide renders in system-ui.
G2
No monospace token existsThe product is predominantly monospace. The guide defines --font-heading and --font-body only, so the dominant face in the UI is ungoverned.
G3
No functional colour tierThe palette page ships three swatches — accent, ink, ground. No green, amber or red. A monitoring tool's entire vocabulary is undefined.
G4
One face presented as twoHeading and body resolve to the same family at different weights. The "two faces maximum" rule is satisfied by having effectively one.
G5
Template palette left in placeThe underlying system still carries Modernist's vermilion ramp #EC3013 and Archivo. Overrides sit on top rather than replacing it.
G6
Deck format for a developer document1920×1080 at a 24px floor suits presenting. Implementation specs — tokens, scales, component contracts — belong in the Letter document format.

Interface-level — what reached the screen

01
Brand colour sits on the status hueChrome teal #35E0D0 and healthy mint #2FE6A0 are neighbours. Logo, active nav, focus and "up" read as one signal.
02
Monospace on human languageNav, buttons, chips, KPI captions and group headings are all mono — the direct consequence of G2.
03
Glow on nominal statesEvery KPI card carries a glowing underline and halo. Six competing glows leave no focal point for the one that matters.
04
Colour without meaningPool cards glow teal while holding zero systems. MONITORS 0/0 is violet, a hue with no assigned role.
05
A card contradicts itselfDOWN 1 in red above the caption 0 critical alerts. One card, opposite conclusions.
06
Hostnames truncatechlori… nitrog… tungst… Identity is the one field that must never clip; tiles are too narrow.
07
Two tile designs in one gridSome tiles carry a sparkline, others the literal word SYSTEM over an empty bar.
08
Machine identifiers in chromeACTIVE C2 7211776717853820412 spends the most valuable strip in the app on a value no human reads.
09
Placeholders shipped as contentA group heading rendered as —, a version as V—. These read as defects, not absence.
10
Counts disagree across viewsHeader says 18 systems; sidebar and Systems page say 9. The operator cannot tell which is right.
11
Status drawn as a controlHeartbeat uses an on/off switch — it invites a tap that does nothing and reads as operator state.
12
Severity encoded thrice, then zeroAlert rows carry bar, dot and icon; the Systems table then drops the dot for down.
13
Icon set is not a setSolid and outline mixed, stroke weights inconsistent, several glyphs off any shared grid.
14
Muted text below thresholdCaptions such as no systems yet fall under 3:1 and vanish at arm's length on a tablet.

The single root cause. The guide never assigned jobs — it named an accent and a face, omitted status colour and monospace, and left the template's palette underneath. With nothing specified, the interface used teal, glow and monospace as decoration. Rev 2 gives each one exactly one job and forbids the rest.

SolariNet · Rev 2.0.003
Section 02

Colour architecture

One rule governs the whole palette: a hue that reports condition may not also decorate the interface.
Rev 1 — collision
brand / nav / focus
status · healthy

Two hues, 18° apart. On a wall of tiles the operator cannot separate "this is chrome" from "this is fine".

Rev 2 — separated
brand / nav / focus · azure
status · healthy · green

Azure is reserved for interface. Green, amber and red belong to condition and appear nowhere else.

Hue assignment

Hue
Owns
Never used for
Azure
Chrome, links, focus, selection, info
Any condition or severity
Green
Healthy / operational only
Buttons, brand, emphasis
Amber
Degraded, over tolerance, stale
Decoration, highlights
Red
Down, critical, destructive action
Counts that are not faults
Violet
Maintenance — operator-declared
Unknown or missing data
Slate
Unknown, unreported, disabled
Anything actionable

Coverage ceilings

Accent ≤ 10%

Azure covers no more than a tenth of any surface: active nav item, focused control, one primary button, links.

Fault ≤ 5%

Amber and red together stay under a twentieth. If a screen exceeds it the screen is a triage list, not a dashboard.

Glow ≤ 1 element

Outer glow marks the single most severe item in view. Two glows in one region is a defect.

Why the brand moved rather than the status hue. Status green, amber and red are conventions an operator brings from every other tool; they are not ours to reassign. The brand is ours. Moving the accent to azure costs one logo revision and settles the ambiguity permanently.

SolariNet · Rev 2.0.004
Section 03

Palette

Three tiers. Primary capped at three. Values are dark-theme; the light column carries the paired token.

Tier 1 · Primary

Signal AzureAccent · interactive
#22B8F0 · 34 184 240
C72 M13 Y0 K6
VoidGround
#070A0F · 7 10 15
C53 M33 Y0 K94
HalideInk
#DFE8F2 · 223 232 242
C8 M4 Y0 K5

Tier 2 · Neutrals & surfaces

Surface#0E151D
Raised#16202C
Divider#22303F
Divider hi#31465C
Ink dim#9DB0C4
Ink faint#6E8399
Quiet#4E6B7E
Unknown#7C8AA0

Tier 3 · Functional — condition only

Operational#3DD68C · up
Degraded#F5A623 · warn
Down#FF4D5E · crit
Maintenance#9B87FF

Changed from Rev 1. v1 defined three swatches — accent, ink, ground — and no functional tier at all; tier 3 below is entirely new, and its absence is why the dashboard's status colours drifted. Accent teal #35E0D0 is retired to clear the status hues. Healthy mint darkens to #3DD68C so it recedes against ink. Ink-faint rises from #54687F to clear 3:1. Violet is reassigned from decoration to maintenance. The Modernist vermilion ramp is removed rather than overridden.

SolariNet · Rev 2.0.005
Section 04

Contrast

Ratios below are computed in the browser at render time from the hex values on the previous page. None are authored.

Approved pairings · dark theme

Thresholds applied

≥ 7:1 body text at any size.
≥ 4.5:1 body text 14px and above.
≥ 3:1 icons, chrome, 19px+ or bold 14px+.
< 3:1 prohibited — struck through above.

Rules that follow

Ink-faint is licensed for uppercase mono labels at 10px and above only, never for prose. Status hues are legible as text on all three grounds but are used as fills and dots first, text second.

Non-colour redundancy. No state is signalled by hue alone. Every one pairs its colour with a distinct glyph and a text label, so the system survives monochrome print, deuteranopia and a sunlit tablet.

SolariNet · Rev 2.0.006
Section 05

Status system

Six states. Each has one colour, one glyph, one label and a defined chrome treatment. Nothing else may indicate condition.
State
Glyph
Chrome
Meaning
Operational
● filled
Hairline divider only
Reporting, all metrics in tolerance
Degraded
▲ triangle
Amber 1px border
Reporting, one or more over tolerance
Down
■ square
Red border + sole glow
Reachability lost from every vantage
Maintenance
◆ diamond
Violet dashed border
Alerting suppressed by an operator
Unknown
○ hollow
Slate border, 60% opacity
Enrolled, never reported
Stale
◐ half
Slate border + age badge
Last report older than 3 intervals

One encoding per row

Rev 1 — triple encoded, then none
▲
PiHole 1 is down
reachability lost
PiHole 1down

Bar, dot and icon all say "critical" in the alert; the table then says it in plain ink with no marker at all.

Rev 2 — consistent
crit
PiHole 1 is down
core-infra · reachability lost · 4m
PiHole 1down

Severity once, as a labelled pill. The state cell always carries dot plus word, in every table.

Status is observed, never operable. Toggles, switches and sliders are reserved for controls the operator can actually change. Heartbeat, reachability and health render as indicators — a dot, a sparkbar, a timestamp — and are never drawn as a switch.

SolariNet · Rev 2.0.007
Section 06

The quiet-healthy principle

At 300 systems, roughly nine in ten are fine. Painting the majority bright is what hides the minority that is not.
Rev 1 — every tile lit

Ten healthy tiles glow as hard as the two faults. Finding the fault is a reading task, not a glance.

Rev 2 — exceptions only

Healthy is structural — hairline border, no fill, no glow. The eye lands on the two exceptions immediately.

Emphasis budget by state

State
Border
Fill
Glow
Dot
Operational
divider
none
none
green 8px
Degraded
amber
12%
none
amber 8px
Down
red
16%
yes
red 8px
Maintenance
violet dash
none
none
violet 8px
Unknown / stale
slate
none
none
hollow 8px

Consequence for the grid. A healthy fleet renders as a calm lattice of hairlines. Any colour on screen is information. This is what lets the same view work at three systems and at three hundred.

SolariNet · Rev 2.0.008
Section 07

Logo

The v1 mark places the product's critical red on two of six satellites, so the app icon permanently reports two faults. Three replacement candidates follow.
Rev 1 mark — as shipped

Two satellites are #FF3D72 — the crit red from the dashboard. Four are accent teal. The mark asserts a fleet state, and the exported PNG bakes in an outer glow and a grid plate.

Correction

One accent hue only, in the app and in every export. Six satellites reduce to three — at 16px the six read as an indistinct ring. Status colour is permitted on the satellites in one place only: the live favicon, where reporting fleet state is the intent.

A · Vantage triad recommended

A server hub with three monitor vantages — the product's actual architecture. Distinct at 16px, survives one colour, and the three satellites can carry state in the favicon.

B · Aperture

Three arcs around a solid core — reads "solar" and "sweep". Elegant but generic; several monitoring tools already use an iris, and it says nothing about topology.

C · Quadrant

A four-cell grid echoing the fleet heatmap. Strong as a favicon and trivially scalable, but indistinguishable from a dozen dashboard products.

Wordmark

Rev 1
solariNet

Monospace flattens the letterforms and widens the mark unnecessarily. The colour split on "Net" adds a second brand hue with no rationale and fails in one-colour print.

Rev 2
SolariNet

Plex Sans, weight contrast instead of colour contrast — 300 against 600. Holds the compound name, prints in one ink, and keeps the capital the product name actually carries.

Lockups to produce. Horizontal (mark + wordmark, default), stacked, mark alone (favicon, PWA icon, collapsed rail) and one-colour reversed — all four as SVG from one source path, none carrying a baked-in glow or background plate.

SolariNet · Rev 2.0.009
Section 08

Construction & clear space

Candidate A on a 24-unit grid. Every dimension is a multiple of the unit; nothing is optically nudged.
Unit (u)hub width ÷ 6
Canvas24u × 24u
Hub6u, radius 1.6u
Orbit radius8u from centre
Satellites3.2u square, 45°
Satellite angles−90° · 30° · 150°
Spoke stroke1.1u, 55% opacity
Clear space2u on all sides
Min size · screen16px canvas
Min size · print6mm canvas

Clear space

The dashed frame sits 2u — one third of the hub — outside the canvas on every side. No type, rule or edge enters it. In the collapsed nav rail the rail padding satisfies this; no extra inset is needed.

Below minimum

Under 16px the spokes disappear before the satellites do, leaving four ambiguous squares. Below that threshold use the hub alone as a solid rounded square.

Favicon behaviour. The three satellites may each take a status colour to give the browser tab and installed PWA icon an at-a-glance fleet summary: all green nominal, one amber degraded, one red fault. This is the only sanctioned recolouring of the mark.

SolariNet · Rev 2.0.010
Section 09

Logo misuse

Six failures, five of them present in Rev 1. Prohibitions only.
Never box the mark in a filled tile

The container competes with the mark and doubles its visual weight in the nav.

solariNet
Never split the wordmark by colour

Fails in one ink and introduces a second brand hue with no defined role.

SolariNet
Never set the wordmark in monospace

Mono is the data face. Using it for identity removes the distinction that makes it useful.

Never render the mark in a status hue

A green logo asserts fleet health. Only the favicon satellites may take state colour.

Never rotate off the vertical axis

The top satellite is the orientation cue; rotating it makes the mark read as a random cluster.

Never stretch to fill a container

Scale proportionally. The canvas is square; letterbox the space around it instead.

Also prohibited: adding an outer glow or drop shadow to the mark, placing it on a photographic background without a solid plate, reproducing it below the stated minimum, and redrawing the satellites as circles.

SolariNet · Rev 2.0.011
Section 10

Typography

The faces were not the problem in Rev 1; their assignment was. Two faces, and a hard rule about which words get which.
Aa Ee Rr
Fleet overview · Reachability
abcdefghijklmnopqrstuvwxyz 0123456789
FaceIBM Plex Sans
ClassificationNeo-grotesque
FoundryIBM · Bold Monday
LicenceSIL OFL 1.1
Weights300 · 400 · 600
Aa Ee Rr
10.42.11.84 · 4.2ms
abcdefghijklmnopqrstuvwxyz 0123456789
FaceIBM Plex Mono
ClassificationMonospace
FoundryIBM · Bold Monday
LicenceSIL OFL 1.1
Weights400 · 600

Division of labour

Sans — human language

Navigation, buttons, headings, prose, captions, empty-state copy, alert titles, form labels, tab names, filter chips.

Mono — machine values

Hostnames, IP and MAC, ports, node IDs, metric numerals, byte and bit rates, durations, timestamps, config keys, log excerpts, certificate fingerprints.

Rev 1 — mono everywhere
MONITOR
Fleet Overview
Reachability
Topology Map

Section label and items share one face and near one weight. Nothing leads; the eye has no entry point.

Rev 2 — assigned
MONITOR
Fleet Overview
Reachability
Topology Map

Mono survives only on the section label, where its tracking is the point. Items gain a real weight step.

Both faces must actually load. v1 imported Archivo over the network, then overrode both tokens to IBM Plex Sans and imported nothing — so the guide and the app rendered in system-ui. Self-host both families as WOFF2 subsets with @font-face and font-display:swap. No network dependency, and PDF export keeps its measurements.

Tabular figures are mandatory wherever numbers stack — tables, KPI rows, metric columns. Set font-variant-numeric: tabular-nums so digits do not shimmy as values tick.

SolariNet · Rev 2.0.012
Section 11

Type scale

Nine steps. Rev 1 ran on effectively three, which is why headings and captions read as one texture.
Specimen
Role
Size
LH
Wt
Use
Display
display
28px
1.15
300
Login, install splash only
Page title
h1
22px
1.2
600
One per screen
Panel heading
h2
16px
1.25
600
Card and panel headers
Row title
h3
13.5px
1.3
600
Alert titles, nav active
Body copy
body
13.5px
1.45
400
Prose — the floor for sentences
Caption
caption
12px
1.4
400
Sub-values under a metric
248
metric
24px
1.05
600
KPI numerals, tabular
10.42.11.84
data
12px
1.35
400
Identifiers, table values
MICRO LABEL
label
10px
1
700
Uppercase only · +0.15em

Floors

13.5px for any sentence. 12px for values and captions. 10px for uppercase mono labels — the only step permitted below 12, and never for prose. Nothing renders under 10px.

Touch on tablet

The primary client is Safari on iPad. Every interactive row, chip, toggle and nav item keeps a 44px minimum hit box regardless of the type step inside it.

What changed. Rev 1 used 23px sans for the page title and mono uppercase for everything else. The mid-range — panel heading, row title, caption — was missing, so cards had no internal hierarchy. Steps 3 through 6 above are the addition.

SolariNet · Rev 2.0.013
Section 12

Iconography

Rev 1 mixed solid and outline glyphs at inconsistent weights. Adopt one library and stop drawing bespoke marks.

Library

LibraryLucide
LicenceISC
Grid24 × 24
Stroke1.75px, round cap
Sizes16 · 18 · 20 · 24
Fillnone — outline only

One exception: status indicators are solid geometric primitives (dot, triangle, square, diamond, ring) drawn in-house on the same 24-grid. They are not icons and must not be swapped for library glyphs.

Nav mapping

Fleet
layout-grid
Reachability
radio
Topology
network
Alerts
triangle-alert
Analysis
activity
Systems
server
Inventory
package
Discovery
scan-search
Provisioning
plus-square
Certificates
shield-check

Rules

Never mix fills

An outline nav beside a solid nav glyph reads as two states. All chrome icons are outline; only status primitives are solid.

Icons do not carry state

A glyph names a thing. Its colour may follow selection, never condition — condition belongs to the adjacent status primitive.

Never icon-only

Every icon in the collapsed rail keeps an accessible name and a tooltip on focus. Badges beside them use one shape and one colour rule.

Badge correction. Rev 1's collapsed rail carried three badges in three colours and two shapes — 88 amber, 1 green, 166 green. Badges are a single pill; red only for unacknowledged criticals, slate for everything else that is merely a count.

SolariNet · Rev 2.0.014
Section 13

Components

The six that carry the dashboard, corrected. Specifications beneath each are the implementation contract.

Metric card — glow removed, accent rule earns its place

Systems
248
monitored hosts
Operational
231
93% in tolerance
Degraded
14
over tolerance
Down
3
3 critical alerts

Nominal cards are neutral — no coloured underline, no halo. Colour appears only when the value is a fault, and the caption must agree with the number above it.

Node tile — one design, identity never truncated

chlorine
10.42.11.9
tungsten
10.42.11.14
molybdenum
10.42.11.31 · cpu 94%
praseodymium
10.42.11.44 · 4m ago
neodymium
maintenance · 2h

Minimum tile width 132px so element hostnames fit whole. Every tile carries the same three rows — name + dot, mono meta, sparkline — with no second variant.

Alert row · table state cell · heartbeat

crit
PiHole 1 unreachable
core-infra · all 2 vantages · 4m
warn
Split vantage on tcp/443
10.0.0.254 · failing from 1 of 2 · 11m
System
State
Heartbeat
chemistry
up
12s
PiHole 1
down
4m

Severity is stated once, as a labelled pill. Heartbeat becomes a sparkbar plus age — an indicator, not the switch Rev 1 drew. Switches are reserved for controls such as enabling a rule.

SolariNet · Rev 2.0.015
Section 14

Layout & density

Fixed column counts instead of auto-fit, so a metric row never orphans its last card.
Rev 1 — six auto-fit cards

The sixth card orphans onto its own row at four-fifths of the width unused.

Rev 2 — four primary, two secondary

Four headline metrics at full weight; supporting figures drop to an inline strip that cannot orphan.

Grid & spacing

Base unit4px
Scale4 · 8 · 12 · 16 · 22 · 32 · 48
Page padding22px / 26px desktop
Panel padding16px
Card gap12px
Tile gap8px
Sidebar248px · 64px collapsed
Top bar60px
Content max1640px, centred
Tile min width132px
Metric row4 columns fixed
Touch target44px minimum

Breakpoints

Name
Width
Sidebar
Behaviour
Wall
≥1600
expanded
Metric row 4-up, tiles 8–10 per row
Desktop
1200–1599
expanded
Metric row 4-up, two-column panels
Tablet landscape
1024–1199
collapsed rail
Primary target — panels single column
Tablet portrait
768–1023
overlay drawer
Metric row 2-up, detail panels stack

No hover-only information. The primary client is a touch device. Every value revealed on hover must also be reachable by tap, and no tooltip may be the sole source of a status, a threshold or an identifier.

SolariNet · Rev 2.0.016
Section 15

Empty states & vocabulary

Rev 1 shipped placeholder glyphs as content. Absence is a state with copy, not a dash.

Corrections

Rev 1 renders
Rev 2 renders
Why
—
Unassigned
A group with no pool needs a name, not an em dash masquerading as one
V—
Version unavailable
Reads as a broken template; state that the controller is not reporting
0/0
No monitors enrolled
Zero of zero is a division, not a status; offer the enrolment action
0 SEGMENTS
Segments not configured
Distinguish "none exist yet" from "none matched"
no systems yet
Empty pool · Add systems
An empty pool is an invitation; give it the action and drop the glow
0%
Awaiting first sample
Zero percent CPU across a live fleet is almost certainly no data

Three kinds of nothing

Not configured

The feature exists, the operator has not set it up. Name it and offer the primary action. Neutral chrome.

No data yet

Configured, awaiting first report. Say what is expected and when. Slate, never a zero value.

Filtered to nothing

Data exists but the filter excludes it. Restate the filter and offer to clear it. Never the same copy as the two above.

Vocabulary — one word per concept

Use
Means
Never
System
A physical or virtual host under monitoring
node, machine, box
Application
A watched service or process on a system
proc, service, app
Target
A probed network endpoint — proto, host, port
check, probe, endpoint
Vantage
A monitor's viewpoint onto a target
agent, collector
Pool
An operator-defined group of systems
segment, group, cluster
Segment
A network range — CIDR-defined, not chosen
subnet, zone, VLAN

Counts must agree. Rev 1 reported 18 systems in one header and 9 in another. One count per concept, derived once, rendered everywhere from the same source — and label it with the noun above, never "nodes".

SolariNet · Rev 2.0.017
Section 16

Handoff

Fix the specification first — three of its faults are why the interface drifted. Then the UI list, ordered by legibility gained per line touched.

G1 · Load the fonts

Drop the Archivo @import. Self-host Plex Sans and Plex Mono as WOFF2 @font-face subsets. Until this ships, every measurement in the guide and app is system-ui.

G2 · Add a mono token

Introduce --font-mono and govern it. The dominant face in the product currently has no entry in the system.

G3 · Add the functional tier

Define ok, degraded, down, maintenance and unknown as tokens. Remove the leftover Modernist vermilion ramp rather than overriding it.

#
Change
Touches
Size
1
Retire accent teal; adopt azure for all chrome
--teal → --accent tokens
S
2
Strip glow and coloured rule from nominal cards
.kpi, .cell, pool cards
S
3
Sans for nav, buttons, chips, headings
.nav-item, .seg, .chip, .kpi__k
S
4
Raise ink-faint to clear 3:1
--ink-faint token
S
5
Tile min-width 132px; single tile variant
.heat, .cell
M
6
Quiet-healthy: neutral chrome for operational
.cell.up, .tile, table rows
M
7
State cell always dot + label, every table
.grid td, Systems table
S
8
Heartbeat switch → sparkbar + age
Systems table heartbeat column
M
9
Severity once per row; drop redundant dot and icon
.alert-row
S
10
Replace node ID in top bar with hostname
.statuschip
S
11
Empty-state copy per section 15
sidebar footer, pool cards, groups
M
12
Reconcile system counts to one source
summary derivation
M
13
Metric row to fixed 4 columns
.kpis
S
14
Swap icon set to Lucide, outline only
icons module
L
15
New mark and wordmark; strip baked glow from exports
.brand, manifest, icons/, mark.svg
M
16
Add Maintenance state end to end
data model, tiles, tables, rules
L

Assets to produce

Mark as SVG in four lockups, no baked glow; favicon 16/32; PWA icons 192/512 plus maskable 512; Plex Sans and Plex Mono self-hosted as WOFF2 subsets. All under SIL OFL 1.1 and ISC — no licence blockers.

Not settled here

Trademark and usage restrictions on the SolariNet name are the owner's to state; this guide specifies visual construction only. Motion timings remain unspecified pending a decision on live-tick animation.

Standing rule. When this guide does not cover a case, apply the test that produced it: does this pixel tell the operator something they did not already know? Decoration that survives that question is fine. Decoration that cannot answer it comes out.

SolariNet · Rev 2.0.018